<template>
  <input
    type="text"
    class="myinput"
    @blur="handlerBlur"
    @input="handlerInput"
  />
</template>

<script>
export default {
  props: {
    //   传入验证规则
    rules: {
      type: RegExp,
    },
    msg: {
      type: String,
      default: "用户数据输入不合法",
    },
  },
  methods: {
    //  当输入框失去焦点
    // 不是每一次都会有验证规则，只有传入了验证规则才需要进行验证
    handlerBlur(e) {
      // console.log(e);
      // this.$emit("input", e.target.value);
    },
    // 发出input事件
    handlerInput(e) {
      // console.log(e.target);
      this.$emit("input", e.target.value);
    },
  },
};
</script>
<style lang="less" scoped>
.myinput {
  width: (318/360 * 100vw);
  height: 50px;
  border: none;
  outline: none;
  border-bottom: 2px solid #ccc;
  line-height: 50px;
  font-size: 18px;
  color: #888;
}
</style>